<template>
  <div class="music-player-container">
    <!-- 音乐图标按钮 -->
    <button 
      @click="togglePlayer"
      class="music-toggle-btn"
      :class="{ 'is-playing': isPlaying }"
    >
      <PlayIcon v-if="!isPlaying" className="w-6 h-6" />
      <PauseIcon v-else className="w-6 h-6" />
    </button>

    <!-- 音乐播放器面板 -->
    <Transition name="slide-up">
      <div v-if="isExpanded" class="music-player-panel">
        <div class="player-header">
          <h3 class="player-title">音乐播放器</h3>
          <button @click="togglePlayer" class="close-btn">
            <CloseIcon className="w-5 h-5" />
          </button>
        </div>

        <div class="player-content">
          <!-- 加载状态 -->
          <div v-if="musicStore.isLoading" class="loading-state">
            <div class="loading-spinner"></div>
            <p>加载音乐中...</p>
          </div>
          
          <!-- 错误状态 -->
          <div v-else-if="musicStore.error" class="error-state">
            <p>{{ musicStore.error }}</p>
            <button @click="musicStore.refreshPlaylist" class="retry-btn">重试</button>
          </div>
          
          <!-- 正常状态 -->
          <div v-else>
            <!-- 歌曲信息 -->
            <div class="song-info">
              <div class="song-title">{{ currentSong?.title || '暂无音乐' }}</div>
              <div class="song-artist">{{ currentSong?.artist || '未知艺术家' }}</div>
            </div>

          <!-- 进度条 -->
          <div class="progress-container">
            <div class="progress-bar" @click="seekTo">
              <div 
                class="progress-fill" 
                :style="{ width: progressPercentage + '%' }"
              ></div>
              <div 
                class="progress-thumb" 
                :style="{ left: progressPercentage + '%' }"
              ></div>
            </div>
            <div class="time-display">
              <span>{{ musicStore.formattedCurrentTime }}</span>
              <span>{{ musicStore.formattedDuration }}</span>
            </div>
          </div>

          <!-- 控制按钮 -->
          <div class="controls">
            <button @click="previousSong" class="control-btn">
              <PreviousIcon className="w-5 h-5" />
            </button>
            
            <button @click="togglePlayPause" class="play-pause-btn">
              <PlayIcon v-if="!isPlaying" className="w-8 h-8" />
              <PauseIcon v-else className="w-8 h-8" />
            </button>
            
            <button @click="nextSong" class="control-btn">
              <NextIcon className="w-5 h-5" />
            </button>
          </div>

          <!-- 音量控制 -->
          <div class="volume-container">
            <VolumeIcon className="w-4 h-4" />
            <input 
              type="range" 
              v-model="volume" 
              min="0" 
              max="100" 
              class="volume-slider"
              @input="updateVolume"
            >
            <span class="volume-text">{{ volume }}%</span>
          </div>

            <!-- 播放列表 -->
            <div class="playlist">
              <div class="playlist-header">
                <h4 class="playlist-title">播放列表</h4>
                <button @click="musicStore.refreshPlaylist" class="refresh-btn" title="刷新播放列表">
                  <RefreshIcon className="w-4 h-4" />
                </button>
              </div>
              <div class="playlist-items">
                <div 
                  v-for="(song, index) in playlist" 
                  :key="song.id || index"
                  @click="playSong(index)"
                  class="playlist-item"
                  :class="{ 'active': index === currentSongIndex }"
                >
                  <span class="song-number">{{ index + 1 }}</span>
                  <div class="song-details">
                    <div class="song-name">{{ song.title }}</div>
                    <div class="song-artist-small">{{ song.artist }}</div>
                    <div class="song-source">{{ getSourceLabel(song.source) }}</div>
                  </div>
                  <span class="song-duration">{{ song.duration }}</span>
                </div>
                <div v-if="playlist.length === 0" class="empty-playlist">
                  <p>暂无音乐</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted } from 'vue'
import { useMusicStore } from '~/store/music'
import { 
  PlayIcon, 
  PauseIcon, 
  CloseIcon, 
  PreviousIcon, 
  NextIcon, 
  VolumeIcon, 
  RefreshIcon 
} from '~/components/Icons'

// 使用音乐播放器 store
const musicStore = useMusicStore()

// 计算属性
const isExpanded = computed(() => musicStore.isExpanded)
const isPlaying = computed(() => musicStore.isPlaying)
const currentSong = computed(() => musicStore.currentSong)
const playlist = computed(() => musicStore.playlist)
const progressPercentage = computed(() => musicStore.progressPercentage)
const currentTime = computed(() => musicStore.currentTime)
const duration = computed(() => musicStore.duration)
const volume = computed(() => musicStore.volume)

// 切换播放器展开/收起
const togglePlayer = () => {
  musicStore.toggleExpanded()
}

// 播放/暂停切换
const togglePlayPause = () => {
  musicStore.togglePlayPause()
}

// 上一首
const previousSong = () => {
  musicStore.previousSong()
}

// 下一首
const nextSong = () => {
  musicStore.nextSong()
}

// 播放指定歌曲
const playSong = (index) => {
  musicStore.playSong(index)
}

// 进度条点击跳转
const seekTo = (event) => {
  const rect = event.currentTarget.getBoundingClientRect()
  const clickX = event.clientX - rect.left
  const percentage = clickX / rect.width
  const newTime = percentage * duration.value
  
  musicStore.seekTo(newTime)
}

// 更新音量
const updateVolume = (event) => {
  const newVolume = parseInt(event.target.value)
  musicStore.updateVolume(newVolume)
}

// 格式化时间
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 获取来源标签
const getSourceLabel = (source) => {
  const sourceLabels = {
    local: '本地',
    database: '数据库',
    external: '外部'
  }
  return sourceLabels[source] || '未知'
}

// 初始化
onMounted(() => {
  musicStore.initAudio()
})

onUnmounted(() => {
  musicStore.cleanup()
})
</script>

<style scoped>
.music-player-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.music-toggle-btn {
  width: 3rem;
  height: 3rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 50%;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.music-toggle-btn:hover {
  background-color: #2563eb;
  transform: scale(1.1);
}

.music-toggle-btn.is-playing {
  background-color: #10b981;
}

.music-toggle-btn.is-playing:hover {
  background-color: #059669;
}

.music-player-panel {
  position: absolute;
  bottom: 4rem;
  right: 0;
  width: 20rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e5e7eb;
  max-height: 500px;
  overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
  .music-player-panel {
    background-color: #1f2937;
    border-color: #374151;
  }
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  .player-header {
    border-color: #374151;
  }
}

.player-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
}

@media (prefers-color-scheme: dark) {
  .player-title {
    color: white;
  }
}

.close-btn {
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  border: none;
  background: none;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  .close-btn:hover {
    background-color: #374151;
  }
}

.player-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.song-info {
  text-align: center;
}

.song-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #1f2937;
}

@media (prefers-color-scheme: dark) {
  .song-title {
    color: white;
  }
}

.song-artist {
  font-size: 0.875rem;
  color: #6b7280;
}

@media (prefers-color-scheme: dark) {
  .song-artist {
    color: #9ca3af;
  }
}

.progress-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progress-bar {
  position: relative;
  height: 0.5rem;
  background-color: #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .progress-bar {
    background-color: #374151;
  }
}

.progress-fill {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

.progress-thumb {
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  background-color: #3b82f6;
  border-radius: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.time-display {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6b7280;
}

@media (prefers-color-scheme: dark) {
  .time-display {
    color: #9ca3af;
  }
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.control-btn {
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s;
  border: none;
  background: none;
  cursor: pointer;
}

.control-btn:hover {
  background-color: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  .control-btn:hover {
    background-color: #374151;
  }
}

.play-pause-btn {
  padding: 0.75rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 50%;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}

.play-pause-btn:hover {
  background-color: #2563eb;
}

.volume-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.volume-slider {
  flex: 1;
  height: 0.5rem;
  background-color: #e5e7eb;
  border-radius: 0.5rem;
  appearance: none;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .volume-slider {
    background-color: #374151;
  }
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  background-color: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
}

.volume-text {
  font-size: 0.75rem;
  color: #6b7280;
  width: 2rem;
}

@media (prefers-color-scheme: dark) {
  .volume-text {
    color: #9ca3af;
  }
}

.playlist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.playlist-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

@media (prefers-color-scheme: dark) {
  .playlist-title {
    color: #d1d5db;
  }
}

.playlist-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.playlist-item:hover {
  background-color: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  .playlist-item:hover {
    background-color: #374151;
  }
}

.playlist-item.active {
  background-color: #eff6ff;
}

@media (prefers-color-scheme: dark) {
  .playlist-item.active {
    background-color: rgba(59, 130, 246, 0.2);
  }
}

.song-number {
  font-size: 0.75rem;
  color: #6b7280;
  width: 1rem;
}

@media (prefers-color-scheme: dark) {
  .song-number {
    color: #9ca3af;
  }
}

.song-details {
  flex: 1;
  min-width: 0;
}

.song-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-color-scheme: dark) {
  .song-name {
    color: white;
  }
}

.song-artist-small {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-color-scheme: dark) {
  .song-artist-small {
    color: #9ca3af;
  }
}

.song-duration {
  font-size: 0.75rem;
  color: #6b7280;
}

@media (prefers-color-scheme: dark) {
  .song-duration {
    color: #9ca3af;
  }
}

/* 动画效果 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #6b7280;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #e5e7eb;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #dc2626;
}

.retry-btn {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.retry-btn:hover {
  background: #2563eb;
}

/* 播放列表头部 */
.playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.refresh-btn {
  padding: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s;
}

.refresh-btn:hover {
  color: #3b82f6;
}

/* 歌曲来源标签 */
.song-source {
  font-size: 0.625rem;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  display: inline-block;
  margin-top: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  .song-source {
    background: #374151;
    color: #d1d5db;
  }
}

/* 空播放列表 */
.empty-playlist {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .music-player-panel {
    width: 18rem;
    right: 0;
  }
}
</style>
